<script setup lang="ts">
import HomeBanner from './HomeBanner.vue';
import { useI18n } from 'vue-i18n';
import { computed } from 'vue';
import { useRouter } from 'vitepress';
import { formatNumber } from '@/shared/utils';
import ad_1 from '@/assets/home/advantage/1.png';
import ad_2 from '@/assets/home/advantage/2.png';
import ad_3 from '@/assets/home/advantage/3.png';
import ad_4 from '@/assets/home/advantage/4.png';
import icon_download from '@/assets/home/achievement/icon-download.png';
import icon_issue from '@/assets/home/achievement/icon-issue.png';
import icon_pr from '@/assets/home/achievement/icon-pr.png';
import icon_star from '@/assets/home/achievement/icon-star.png';
import card_back from '@/assets/card-back.png';
import ArrowRightYellow from '~icons/app/icon-arrow-yellow.svg';
import HomeNews from './HomeNews.vue';
import HomeInstall from './HomeInstall.vue';
import HomePartners from './HomePartners.vue';
import HomeVideo from './HomeVideo.vue';
import HomeCase from './HomeCase.vue';
import HomeEcosystem from './HomeEcosystem.vue';
import HomeCooperation from './HomeCooperation.vue';
import HomeResource from './HomeResource.vue';
const { t } = useI18n();
const router = useRouter();
const home = computed(() => {
  return {
    achievement_title: t('home.achievement.title'),
    install_title: t('home.install.title'),
    install_btn_text: t('home.install.btn_text'),
    case_title: t('home.case.title'),
    ecosystem_title: t('home.ecosystem.title'),
    resource_title: t('home.resource.title'),
    partner_title: t('home.partner.title'),
    partner_btn_text: t('home.partner.btn_text'),
    cooperation_title: t('home.cooperation.title'),
    learn_more: t('home.learn_more'),
    video: {
      title: t('home.video.title'),
      btn_left: t('home.video.btn_left'),
      btn_right: t('home.video.btn_right'),
    },
    ecosystem: {
      title: t('home.ecosystem.title'),
    },
    resource: {
      title: t('home.resource.title'),
    },
    cooperation: {
      title: t('home.cooperation.title'),
    },
  };
});
const advantage = computed(() => {
  return {
    title: t('home.advantage.title'),
    btn_left: t('home.advantage.btn_left'),
    btn_right: t('home.advantage.btn_right'),
    ads: [
      {
        label: t('home.advantage.ad_1.title'),
        text: t('home.advantage.ad_1.description'),
        icon: ad_1,
      },
      {
        label: t('home.advantage.ad_2.title'),
        text: t('home.advantage.ad_2.description'),
        icon: ad_2,
      },
      {
        label: t('home.advantage.ad_3.title'),
        text: t('home.advantage.ad_3.description'),
        icon: ad_3,
      },
      {
        label: t('home.advantage.ad_4.title'),
        text: t('home.advantage.ad_4.description'),
        icon: ad_4,
      },
    ],
  };
});
const achievement = computed(() => {
  return {
    card_left: {
      title: t('home.achievement.card_left.title'),
      description: t('home.achievement.card_left.description'),
      btn_text: t('home.achievement.card_left.btn_text'),
    },
    card_right: [
      {
        id: 'total_download',
        icon: icon_download,
        value: '455.3',
        label: t('home.achievement.card_right.download'),
      },
      {
        id: 'total_star',
        icon: icon_star,
        value: '18.1',
        label: t('home.achievement.card_right.star'),
      },
      {
        id: 'total_issue',
        icon: icon_issue,
        value: '11.0',
        label: t('home.achievement.card_right.issue'),
      },
      {
        id: 'total_pr',
        icon: icon_pr,
        value: '30.3',
        label: t('home.achievement.card_right.pr'),
      },
    ],
  };
});
// // 跳转
// const goPath = (path: string) => {
//   if (path.startsWith('https:')) {
//     window.open(path, '_blank');
//   } else if (path.includes('datastat')) {
//     window.open(
//       `https://datastat.openlookeng.io/${lang.value}/overview`,
//       '_blank'
//     );
//   } else {
//     router.go(`/${lang.value + path}`);
//   }
// };
</script>

<template>
  <div>
    <div class="home-swiper">
      <home-banner></home-banner>
    </div>
    <div class="wrapper">
      <section class="home-news">
        <home-news></home-news>
      </section>

      <section class="home-advantage">
        <h2 class="home-title">{{ advantage.title }}</h2>
        <p class="home-btn-container">
          <o-button
            style="margin-right: 40px"
            type="text"
            placement="right"
            @click="goPath('/')"
          >
            {{ advantage.btn_left }}
            <template #right
              ><o-icon><arrow-right-yellow></arrow-right-yellow></o-icon
            ></template>
          </o-button>

          <o-button type="text" placement="right" @click="goPath('/')">
            {{ advantage.btn_right }}
            <template #right
              ><o-icon><arrow-right-yellow></arrow-right-yellow></o-icon
            ></template>
          </o-button>
        </p>
        <div class="home-row">
          <div class="home-row-content shadow">
            <div
              v-for="(item, index) in advantage.ads"
              :key="index"
              class="the-card-icon"
            >
              <img :src="item.icon" class="icon" />

              <p class="title">{{ item.label }}</p>
              <p class="text">{{ item.text }}</p>
            </div>
          </div>
        </div>
      </section>

      <section class="home-install">
        <h2 class="home-title">{{ home.install_title }}</h2>
        <home-install></home-install>
        <p class="home-more" @click="handleClick">
          <o-button type="text" placement="right">
            {{ home.install_btn_text }}
            <template #right
              ><o-icon><arrow-right-yellow></arrow-right-yellow></o-icon
            ></template>
          </o-button>
        </p>
      </section>

      <section class="home-case">
        <h2 class="home-title">{{ home.case_title }}</h2>
        <div>
          <home-case></home-case>
        </div>
      </section>
      <section class="home-video">
        <h2 class="home-title">{{ home.video.title }}</h2>
        <p class="home-btn-container">
          <o-button type="text" placement="right" style="margin-right: 40px">
            {{ home.video.btn_left }}
            <template #right
              ><o-icon><arrow-right-yellow></arrow-right-yellow></o-icon
            ></template>
          </o-button>

          <o-button type="text" placement="right">
            {{ home.video.btn_right }}
            <template #right
              ><o-icon><arrow-right-yellow></arrow-right-yellow></o-icon
            ></template>
          </o-button>
        </p>
        <home-video></home-video>
      </section>
      <section home="home-ecosystem">
        <h2 class="home-title">{{ home.ecosystem.title }}</h2>
        <div><home-ecosystem></home-ecosystem></div>
      </section>
      <section class="home-resource">
        <h2 class="home-title">{{ home.resource.title }}</h2>
        <home-resource></home-resource>
      </section>
      <section class="home-achievement">
        <h2 class="home-title">{{ home.achievement_title }}</h2>
        <div class="home-row">
          <div
            class="shadow home-row-info"
            :style="{ backgroundImage: 'url(' + card_back + ')' }"
          >
            <div class="box">
              <h3 class="title">{{ achievement.card_left.title }}</h3>
              <p class="text">{{ achievement.card_left.description }}</p>
            </div>
            <p>
              <o-button type="text" placement="right">
                {{ achievement.card_left.btn_text }}
                <template #right
                  ><o-icon><arrow-right-yellow></arrow-right-yellow></o-icon
                ></template>
              </o-button>
            </p>
          </div>
          <div class="shadow home-row-content">
            <div
              v-for="(item, index) in achievement.card_right"
              :key="index"
              class="the-card-icon"
            >
              <img :src="item.icon" class="icon" />
              <p class="num" style="color: var(--theme-color)">
                {{ formatNumber(+item.value) }}
              </p>
              <p class="label">{{ item.label }}</p>
            </div>
          </div>
        </div>
      </section>
      <section class="home-partners">
        <h2 class="home-title">
          {{ home.partner_title }}
        </h2>
        <p class="home-more" @click="handleClick" style="margin-bottom: 40px">
          <o-button type="text" placement="right">
            {{ home.partner_btn_text }}
            <template #right
              ><o-icon><arrow-right-yellow></arrow-right-yellow></o-icon
            ></template>
          </o-button>
        </p>
        <home-partners></home-partners>
      </section>
      <section class="home-cooperation">
        <h2 class="home-title">{{ home.cooperation.title }}</h2>
        <home-cooperation></home-cooperation>
      </section>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.home-news {
  padding: 96px 0;
}
.home-title {
  font-size: 36px;
  color: var(--theme-title);
  text-align: center;
  padding: 96px 0 40px;
  font-weight: normal;
  &.white {
    color: var(--theme-white);
  }
}
.home-advantage {
  .home-title {
    padding: 96px 0 24px;
  }
  // .home-row {
  //   display: flex;
  //   justify-content: space-between;
  //   &-content {
  //   }
  // }

  .home-row {
    display: flex;
    justify-content: space-between;
    &.reverse {
      grid-template-columns: auto 525px;
    }
    &-info {
      padding: 40px;
      background: var(--theme-card-bg) no-repeat top center/cover;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .title {
        font-size: 18px;
        line-height: 24px;
        color: var(--theme-title);
        font-weight: normal;
      }
      .text {
        padding-top: 24px;
        line-height: 22px;
        color: var(--theme-text);
        font-size: 14px;
      }
    }
    &-content {
      padding: 80px 24px;
    }
  }
}
.home-btn-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding-bottom: 40px;
}

.playground {
  margin: 64px 0;
  height: 220px;
  text-align: center;
  background: var(--theme-card-bg) no-repeat top center/cover;
  .home-title {
    padding: 40px 0 36px;
  }
}

.home-row {
  display: grid;
  grid-template-columns: 525px auto;
  gap: 24px;
  &.reverse {
    grid-template-columns: auto 525px;
  }
  &-info {
    padding: 40px;
    background: var(--theme-card-bg) no-repeat top center/cover;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .title {
      font-size: 36px;
      color: var(--theme-title);
      line-height: 48px;
      font-weight: normal;
    }
    .text {
      margin: 16px 0;
      line-height: 22px;
      color: var(--theme-text);
      font-size: 14px;
    }
  }
  &-content {
    flex: 1;
    background: var(--theme-card-bg);
    display: flex;
    justify-content: space-evenly;
    padding: 40px 0;
  }
}

.home-links-panel {
  background: var(--theme-card-black);
  margin-top: 64px;
}

.the-card-icon {
  text-align: center;
  display: flex;
  flex-direction: column;
  width: 185px;

  .icon {
    width: 124px;
    height: 124px;
    margin: 0 auto 24px;
  }
  .num {
    font-size: 28px;
    color: var(--theme-title);
    line-height: 36px;
    margin: 0 0 8px;
    font-weight: 500;
  }
  .label {
    font-size: 18px;
    color: var(--theme-title);
    line-height: 24px;
  }
  .text {
    font-size: 14px;
    color: var(--theme-text);
    line-height: 22px;
    margin-top: 8px;
  }
}

.home-more {
  text-align: center;
  margin-top: 24px;
  .o-link-icon {
    font-size: 14px;
    color: var(--theme-title);
  }
}
@media (max-width: 1438px) {
  .the-card-icon {
    width: 160px;
    .text {
      display: none;
    }
  }
}
@media (max-width: 1100px) {
  .home-more {
    margin-top: 16px;
  }
  .home-links-panel {
    margin-top: 40px;
  }
  .home-row {
    grid-template-columns: 100% !important;
    height: auto !important;
    gap: 8px;
    &-info {
      padding: 16px;
      order: -1;
      .title {
        font-size: 16px;
        line-height: 24px;
      }
      .text {
        height: auto;
        line-height: 18px;
        font-size: 12px;
        margin: 8px 0;
      }
      .o-link-icon {
        font-size: 12px;
      }
    }
    &-content {
      padding: 16px 0;
      .the-card-icon {
        .icon {
          width: 32px;
          height: 32px;
          margin-bottom: 6px;
        }
        .num {
          font-size: 14px;
          line-height: 22px;
          margin: 0;
        }
        .label {
          line-height: 18px;
          font-size: 12px;
        }
      }
    }
  }
  .playground {
    margin: 40px 0;
    padding-bottom: 24px;
    height: auto;
    .home-title {
      padding: 24px 0 16px;
    }
  }
  .home-title {
    padding: 40px 0 16px;
    font-size: 16px;
    line-height: 24px;
  }
}
</style>
